[cssom-view-1] Added definition of getBoxQuads() #10538

jogibear9988 · 2024-07-08T07:07:44Z

A linked issue:
#10514

A firefox issue with a little bit of description:
https://bugzilla.mozilla.org/show_bug.cgi?id=1107559

A polyfill for the API
https://github.com/jogibear9988/getBoxQuadsPolyfill

jogibear9988 · 2024-07-10T12:54:19Z

One issues atm:
My polyfill only works for 2D transformations, 3D with perspective do not work (yet). Have to figure out how to do this. Cause of that, also my spec only works for 2D. I've found some spect for the 3D matrix, wich then also could maybe reused: https://drafts.csswg.org/css-transforms-2/#accumulated-3d-transformation-matrix-computation

SebastianZ · 2025-05-12T10:07:11Z

I think it makes more sense to add another option to getBoxQuads() to consider the transformed coordinates instead of introducing a separate function getCompleteTransform() for that.

I imagine something like getBoxQuads({considerTransformations: true}).

Sebastian

jogibear9988 · 2025-05-12T11:09:59Z

One issues atm: My polyfill only works for 2D transformations, 3D with perspective do not work (yet). Have to figure out how to do this. Cause of that, also my spec only works for 2D. I've found some spect for the 3D matrix, wich then also could maybe reused: https://drafts.csswg.org/css-transforms-2/#accumulated-3d-transformation-matrix-computation

should be fixed in current polyfill

jogibear9988 · 2025-05-12T11:12:11Z

I think it makes more sense to add another option to getBoxQuads() to consider the transformed coordinates instead of introducing a separate function getCompleteTransform() for that.

I imagine something like getBoxQuads({considerTransformations: true}).

Sebastian

it's in a extra method, cause it is used from other functions in the spec (like convertPointFromNode). And convertPointFromNode use it multiple times

emilio

Thanks, this looks like a good start. Please look at how other specs (specially recent ones) use bikeshed in order to get the formatting and references correct. Also this needs to work in terms of nodes and boxes, not elements.

emilio · 2025-05-22T09:45:37Z

cssom-view-1/Overview.bs


-The <dfn method for=GeometryUtils lt="getBoxQuads(options)|getBoxQuads()">getBoxQuads(<var>options</var>)</dfn> method must run the following steps:
-
+The helper method getCompleteTransform(anchestor) must run the following steps:


You need to get the element as a parameter, and use <div algorithm> for this for example:

<div algorithm="get the complete transform"> In order to <dfn export>get the complete transform</dfn> of an node <var>node</var> relative to a node <var>ancestor</ancestor> ... </div>

Added node to helper function

emilio · 2025-05-22T09:45:52Z

cssom-view-1/Overview.bs

-
-  test block in inline
+1. let currentElement be the element getCompleteTransform() called on.
+2. let transformationMatrix be the current transformation matrix of currentElement (https://www.w3.org/TR/css-transforms-2/#ctm)


Please use bikeshed references for this.

Where should I use a bikeshed reference? (Is there an editor wich helps in editing bs files)

emilio · 2025-05-22T09:46:48Z

cssom-view-1/Overview.bs


 <ol>
- <li><p class=issue>...
+1. get the resulting matrix between the element and the document.defaultView via the algorithm defined in getCompleteTransform


All these algorithms need to be in terms of nodes, as GeometryUtils also applies to text nodes and such.

Is node correct? Or should it be "GeometryNode"?

emilio · 2025-05-22T09:47:40Z

cssom-view-1/Overview.bs

+   - 'border': no change
+   - 'margin': x - margin.left, y - margin.top
+   - 'padding': x + border.leftWidth, y + border.topWidth
+   - 'content': x + border.leftWidth + padding.left, y + border.topWidth + padding.top


This is not actually based on the computed style but on the actual used padding box etc. Those boxes are defined already elsewhere and we should reuse the definitions.

I don't really find where I should link to.
maybe: https://drafts.csswg.org/css2/#Computing_widths_and_margins

I don't really find where I should link to. maybe: https://drafts.csswg.org/css2/#Computing_widths_and_margins

Pretty sure those boxes are defined here: https://drafts.csswg.org/css-box-4/#box-edges

Yeah, but I need to link to the Algorythm how they are calculated, or is this enough?

Yeah, but I need to link to the Algorythm how they are calculated, or is this enough?

There is no algorithm like that for these. They are defined in English instead. Browsers have algorithms internally that match those descriptions and can call into those when a spec says to do something with one of these boxes, so linking to their definitions is enough to unambiguously tell an implementer what needs to happen.

More modern specs like to define their concepts in terms of algorithms to derive them, because that makes implementation easier and leaves less room for creative (mis-)interpretation of the definition.

TL;DR: You want to link to a concept's definition when using it. Whether that is an algorithm or not doesn't matter.

whimboo · 2025-07-08T18:16:31Z

Hi @jogibear9988, would you maybe have the time to follow-up on the review from Emilio? Thanks

jogibear9988 · 2025-07-28T18:47:34Z

@emilio
is it okay like now?

emilio

This still needs a bit of work to get the spec into a reasonable shape, but looks in the right direction. Thanks!

emilio · 2025-08-14T15:38:21Z

cssom-view-1/Overview.bs

-  points are flattened (3d transform), z=0. like getClientRect
-
-  test block in inline
+ 1. let currentElement be node.


currentNode, right? I think this should use <var>current</var> and other bikeshed markup to display properly.

emilio · 2025-08-14T15:38:28Z

cssom-view-1/Overview.bs

+ 1. let currentElement be node.
+ 2. let transformationMatrix be the current transformation matrix of currentElement (https://www.w3.org/TR/css-transforms-2/#ctm)
+ 3. while currentElement is not null do
+ <ol>


Do you really need the <ol>?

emilio · 2025-08-14T15:38:49Z

cssom-view-1/Overview.bs


-The <dfn method for=GeometryUtils lt="getBoxQuads(options)|getBoxQuads()">getBoxQuads(<var>options</var>)</dfn> method must run the following steps:
-
+The helper method getCompleteTransform(node, anchestor) must run the following steps:


I think you should probably add a <dfn> so that you can reference this properly elsewhere.

emilio · 2025-08-14T15:40:09Z

cssom-view-1/Overview.bs


-  viewport boxes are all the same
+<ol>
+ 1. create an array as result container


Let |result| be an empty [=list=] of [=DOMQuad=] objects. etc, please look at existing bikeshed files to see how to make this work.

emilio · 2025-08-14T15:40:46Z

cssom-view-1/Overview.bs

-  viewport boxes are all the same
+<ol>
+ 1. create an array as result container
+ 2. for each css-fragment of the element run the following steps


of what element? Probably of this? Also fragment should link to a definition.

emilio · 2025-08-14T15:46:51Z

cssom-view-1/Overview.bs

+    - 'padding': https://drafts.csswg.org/css-box-4/#box-edges - use the padding-box
+    - 'content': https://drafts.csswg.org/css-box-4/#box-edges - use the content-box
+    3. create a DomQuad from the rect via DOMQuad.fromRect
+    4. Calculate the resulting transformation matrix between the element and options.realtiveTo (if relativeTo is unset use window.defaultView) via the algorithm defined in getCompleteTransform


window.defaultView is not a thing, also s/realtiveTo/relativeTo.

This should be untransforming the rect to the layout viewport if there's no relativeTo.

emilio · 2025-08-14T15:49:45Z

cssom-view-1/Overview.bs


 <ol>
- <li><p class=issue>...
+ 1. transform each point of the DOMQuad via convertPointFromNode


This should link to convertPointFromNode, but also probably should have more precise details like:

* Let <var>p1</var> be the result of calling [=convertFromFromNode=] with <var>quad</var>.p1, <var>from</var> and <var>options</var>. * ... * Return a new [=DOMQuad=] with <var>p1</var>...

emilio · 2025-08-14T15:53:23Z

cssom-view-1/Overview.bs


 <ol>
- <li><p class=issue>...
+ 1. get the resulting matrix between the node and the document.defaultView via the algorithm defined in getCompleteTransform


Give these meaningful names like:

* Let <var>thisTransformToViewport</var> be the result of calling [=getCompleteTransform=] with <var>this</var> and <var>this</var>' [=associated document=]. * Let <var>fromTransformToViewport</var> be the result of ... * Invert <var>fromTransformToViewport</var>. * ...

Then reference those.

emilio · 2025-08-14T15:54:40Z

cssom-view-1/Overview.bs

+   - 'border': no change
+   - 'margin': x - margin.left, y - margin.top
+   - 'padding': x + border.leftWidth, y + border.topWidth
+   - 'content': x + border.leftWidth + padding.left, y + border.topWidth + padding.top


Same, refer to standard terms. It seems ResizeObserver refers to the CSS2 border box area, etc.

emilio · 2025-08-14T15:55:14Z

cssom-view-1/Overview.bs

+ 1. get the resulting matrix between the node and the document.defaultView via the algorithm defined in getCompleteTransform
+ 2. get the resulting matrix between the from and the document.defaultView via the algorithm defined in getCompleteTransform
+ 3. inverse the matrix in 2.
+ 4. Depending on the value of options.fromBox modify the point with the calculated style values of the element.


This should use <var>point</var> etc.

whimboo · 2025-08-27T13:09:16Z

Hi @jogibear9988. Would you maybe have the time to update this PR based on the review feedback from Emilio? Thanks a lot!

jogibear9988 · 2025-08-27T13:40:06Z

Sorry, I've read them, and hopefully fix in the next days

whimboo · 2025-10-30T10:55:10Z

Hi @jogibear9988. I wanted to check back with you about the status of this PR. Is it still something you can continue working on? Thanks!

jogibear9988 added 3 commits July 8, 2024 08:37

Work on description of getBoxQuads API

e91afa6

Update Overview.bs

57dc349

Update Overview.bs

db85f76

svgeesus changed the title ~~[css-spec-shortname-1] https://github.com/w3c/csswg-drafts/issues/10537~~ [cssom-view-1] https://github.com/w3c/csswg-drafts/issues/10537 Jul 8, 2024

svgeesus added the cssom-view-1 label Jul 8, 2024

gsnedders mentioned this pull request Sep 27, 2024

[cssom-view-1] Specify GeometryUtils.getBoxQuads #10968

Open

sadym-chromium mentioned this pull request May 6, 2025

Support retrieval of content quads for elements with CSS transformations w3c/webdriver-bidi#787

Open

SebastianZ changed the title ~~[cssom-view-1] https://github.com/w3c/csswg-drafts/issues/10537~~ [cssom-view-1] Added definition of getBoxQuads() May 12, 2025

gsnedders added Agenda+ and removed Agenda+ labels May 14, 2025

emilio requested changes May 22, 2025

View reviewed changes

css-meeting-bot mentioned this pull request Jun 25, 2025

[cssom-view] update description of getBoxQuads API #10537

Open

dholbert mentioned this pull request Jun 27, 2025

[cssom-view] update description of getBoxQuads API mozilla/wg-decisions#1980

Open

jogibear9988 and others added 5 commits July 28, 2025 07:34

fix duplicated ol

1adcbdd

Merge branch 'main' of https://github.com/w3c/csswg-drafts into patch-1

064b981

fixes

75d652d

fixes

00fe074

adjust spec

6d537f3

emilio requested changes Aug 14, 2025

View reviewed changes


		The <dfn method for=GeometryUtils lt="getBoxQuads(options)\|getBoxQuads()">getBoxQuads(<var>options</var>)</dfn> method must run the following steps:

		The helper method getCompleteTransform(anchestor) must run the following steps:


		The <dfn method for=GeometryUtils lt="getBoxQuads(options)\|getBoxQuads()">getBoxQuads(<var>options</var>)</dfn> method must run the following steps:

		The helper method getCompleteTransform(node, anchestor) must run the following steps:

[cssom-view-1] Added definition of getBoxQuads() #10538

Are you sure you want to change the base?

[cssom-view-1] Added definition of getBoxQuads() #10538

Uh oh!

Conversation

jogibear9988 commented Jul 8, 2024 • edited by SebastianZ Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jogibear9988 commented Jul 10, 2024

Uh oh!

SebastianZ commented May 12, 2025

Uh oh!

jogibear9988 commented May 12, 2025

Uh oh!

jogibear9988 commented May 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

emilio left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

whimboo commented Jul 8, 2025

Uh oh!

jogibear9988 commented Jul 28, 2025

Uh oh!

emilio left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

whimboo commented Aug 27, 2025

Uh oh!

jogibear9988 commented Aug 27, 2025

Uh oh!

whimboo commented Oct 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

jogibear9988 commented Jul 8, 2024 •

edited by SebastianZ

Loading

jogibear9988 commented May 12, 2025 •

edited

Loading